<!--
/**
 * @author xuyh0817
 * @email xuyh0817@foxmail.com
 * @date 2022-10-19 12:46
 * @version 1.0.0
 * @doc todo
 * @website todo
 * @remark  如果要分发源码，需在本文件顶部保留此文件头信息！！
 * @description todo
 */
 -->
<template>
  <div class="x-render-main">
    <div class="x-render-phone">
      <div class="x-render-phone-main">
        <MoTitle v-if="data.title" :title="data.title.text" v-bind="data.title" :key="data.title.id"
                 :style="stylePost(data.title.style)"/>
        <template v-for="item in data.content">
          <MoImage :src="item.src" :key="item.id" :style="stylePost(item.style)" v-if="item.type === 'img'"></MoImage>
          <MoSegment v-bind="item" :key="item.id" :style="stylePost(item.style)" v-else></MoSegment>
        </template>
      </div>
    </div>
    <slot></slot>
  </div>
</template>

<script>

import MoTitle from './Title'
import MoImage from './Image'
import MoSegment from './Segment'

export default {
  name: "MainPane",
  components: {
    MoTitle,
    MoImage,
    MoSegment
  },
  props: {
    data: {
      type: Object,
      default: () => {
        return {
          title: {
            fontSize: 26
          },
          content: []
        }
      }
    }
  },
  methods: {
    stylePost(style) {
      if (style) {
        return JSON.parse(style)
      }
      return {}
    }
  }
}
</script>

<style scoped lang="css">
.x-render-main {
  flex: 1;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  color: #000;
}

.x-render-phone {
  width: 377px;
  height: 669px;
  max-height: 669px;
  border: 1px solid #999;
  border-radius: 6px;
  box-sizing: border-box;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  overflow-x: hidden;
  overflow-y: auto;
}

.x-render-phone-main {
  width: 343px;
  padding: 16px;
  display: flex;
  flex-flow: column nowrap;
  overflow: hidden;
}


</style>
